<!--
 * @Author       : xh
 * @Date         : 2022-08-08 13:50:04
 * @LastEditors  : xh
 * @FileName     :  看板
-->
<template>
  <el-card class="box-card">
    <el-collapse v-model="activeNames" accordion @change="handleChange">
      <el-collapse-item title="超级城市筛选 " name="1">
        <!-- <CitysSelect ref="citys" :type="3" /> -->
      </el-collapse-item>
      <el-collapse-item title="月份多选 " name="2">
        <div style="height: 400px">
          {{ m }}
          <MounthPicker v-model:value="m" />
        </div>
      </el-collapse-item>
      <el-collapse-item title="排序表格" name="3">
        <DragBlock :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="Date" width="180" />
          <el-table-column prop="name" label="Name" width="180" />
          <el-table-column prop="address" label="Address" />
        </DragBlock>
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>
<script setup>
// import CitysSelect from '@com/CitysSelect'
// import MounthPicker from '@com/MounthPicker'
// import DragBlock from '@com/DragBlock'

import { ref, onMounted } from 'vue'
const activeNames = ref(['1'])
// const citys = ref()
const m = ref([])
onMounted(() => {
  // citys.value.setValue(['370611'], true)
})
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    id: '123',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'GGm',
    id: '345',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'OKGF',
    id: '657',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'THF',
    id: '789',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
const handleChange = () => {}
</script>
<style lang="scss" scoped>
h3 {
  text-align: center;
  font-size: 36px;
  font-weight: 500;
}
</style>
